<template>
	<view>
		<custom-navigation-bar title="商品列表"></custom-navigation-bar> 
		<view class="tp_1">
			<view style="width: 90%;float: left;line-height: 60rpx;margin-left: 5%;">
				<label style="float: left;" @click="shotInit">排序</label> <image @click="shotInit" :src="shotImg" style="width: 50rpx;height: 50rpx;float: left;margin-bottom: 5rpx;"></image>
				<label style="float: left;color: #9D9D9D;font-size: 25rpx;">{{shotName}}</label>
			</view>
		</view>
		<view class="tp_3" v-if="shotShow">
			<view v-for="(item,index) in shotArr" :key="index" style="width: 80%;float:left;margin-left: 10%;margin-top: 10rpx;" @click="shot(item)">
				{{item.name}}
			</view>
			<view style="width: 100%;float: left;height: 10rpx;"></view>
		</view>
		<view class="tp_2"></view>
		<view v-if="data.length>0">
			<view class="items" v-for="(item,index) in data" :key="index" @click="detail(item)">
				<view style="width: 280rpx;height: auto;margin: auto auto;">
					<view class="items_img" style="float: left;">
						<image :src="item.thumbnail" class="img"></image> 
					</view>
					<view class="items_7" style="z-index: 999;">
						<view class="items_8">
							团购
						</view>
						<view class="items_9">
							<image class="shop_item10" src="/static/dingwei001.png" style="margin-top: 7rpx;"></image>{{item.juLi}}
						</view>
					</view>
					<view class="title">
						{{item.name}}
					</view>
					<view class="item_01">
					  <view v-for="(i,index) in 5" style="float: left;" :key="index">
					  	<image v-if="item.score>=i" src="../../static/ic_xing@3x(1).png" style="width: 25rpx;height:25rpx"></image>
					  	<image v-if="item.score>=i-0.5&&item.score<i" src="../../static/ic_xing2@3x.png" style="width: 25rpx;height: 25rpx"></image>
					  	<image v-if="item.score>i-1&&item.score<i-0.5" src="../../static/ic_xing3@3x.png" style="width: 25rpx;height: 25rpx"></image>
					  </view> 
					  <label style="font-size: 24rpx;">{{item.score}}分</label>
					</view>
					<view class="items_16" style="float: left;">
						您有{{item.buyNum}}位邻居已下单
					</view>
					
					<view v-if="item.isBook==1" class="items_16" style="float: left;border: none;color: #9D9D9D;text-align: center;font-size: 22rpx;">
						需要预约&nbsp;|&nbsp;交易保障
					</view>
					<view v-if="item.isBook==0" class="items_16" style="float: left;border: none;color: #9D9D9D;text-align: center;font-size: 22rpx;">
						无需预约&nbsp;|&nbsp;交易保障
					</view>
					<view class="item_01">
						<label class="p1">￥{{item.price}}</label> &nbsp;&nbsp;<label class="p2">￥{{item.originPrice}}</label>&nbsp;&nbsp;<label class="p1_1">{{item.zheKou}}</label>
					</view> 
				</view>
				<view style="width: 100%;height: 20rpx;"></view>
			</view>
			 <!-- <view class="more" v-if="pageData.more" @click="getMore()">
				   加载更多
			  </view>
			  <view class="more" v-if="!pageData.more">
				   无更多数据
			  </view> -->
			  <view style="width: 100%;float: left;height: 80rpx;"></view>
		</view> 
		<view class="more" v-if="data.length==0">
		     暂无数据
		</view> 
	</view>
</template>

<script setup> 
	import CustomNavigationBar from '@/components/CustomNavigationBar.vue'
	import http from '../../utils/http';
	const id=ref();
	const shotShow=ref(false);
	const shotImg=ref("../../static/shot1.png");
	function shotInit(){
		if(shotShow.value){
			shotShow.value=false;
			shotImg.value="../../static/shot1.png";
		}else{
			shotShow.value=true;
			shotImg.value="../../static/shot2.png";
		}
	}
	const shotName=ref();
	const shotArr=ref([
		{
			name:'默认排序',
			str:null, 
		},
		{
			name:'销量优先',
			str:' order by buy_num desc ',
			
		},
		{
			name:'评分优先',
			str:' order by score desc '
		},
		{
			name:'价格高到低',
			str:'  order by price desc '
		},
		{
			name:'价格低到高',
			str:'  order by price asc '
		}
	]);
	function shot(item){
		shotName.value=item.name;
		shotShow.value=false;
		shotImg.value="../../static/shot1.png";
		pageData.value={
			pageIndex:1,
			pageSize:10,
			more:true,
			pageData:'',
			order:item.str
		};
		data.value=[];
		initData()
	}
	import {
		onLoad,onShow,
		onPageScroll
	} from '@dcloudio/uni-app';
	const queryBean=ref({
		city:getApp().globalData.user.city,
		district:getApp().globalData.user.district,
	});
	function detail(item){
		if(item.menuId==55||item.menuId==56){
			uni.navigateTo({
				url: "/pages/goods/recharge?id="+item.id
			});
			return
		}
		uni.navigateTo({
			url: "/pages/goods/detail?id="+item.id
		});
	}
	import { onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
	onReachBottom(() => {
	   console.log("1111111111111111111111111111111")
	   if(pageData.value.more){
		   getMore()
	   }
	})
	onPullDownRefresh(()=>{
		pageData.value.more=false;
		pageData.value={
			pageIndex:1,
			pageSize:10,
			more:true,
			pageData:''
		};
		data.value=[];
		initData()
	})
	onLoad((query) => {
		if(query.isHot){
			queryBean.value.isHot=query.isHot;
		}
		if(query.userId){
			queryBean.value.userId=query.userId
		}
		if(query.homeQuery){
			queryBean.value.homeQuery=query.homeQuery
		}
	})
	const data=ref([]);
	const pageData=ref(
		{
			pageIndex:1,
			pageSize:10,
			more:true,
			order:''
		}
	);
	function getMore(){
		pageData.value.pageIndex=pageData.value.pageIndex+1;
		initData();
	}
	
	function initData(){
		http.request({
			url: "/home/goods",
			method: "POST",
			data: {
				pageIndex:pageData.value.pageIndex,
				pageSize:pageData.value.pageSize,
				orderStr:pageData.value.order,
				goods:queryBean.value
			}
		}).then((responseData) => {
			 
			 for(var i=0;i<responseData.data.length;i++){
			 	responseData.data[i].juLi=distance(address.value.latitude, address.value.longitude, responseData.data[i].latitude,responseData.data[i].longitude);
			 	responseData.data[i].zheKou= calculateDiscount(responseData.data[i].originPrice,responseData.data[i].price) 
				var score=responseData.data[i].score/20;
				responseData.data[i].score=score.toFixed(1);
			 }
			 console.log("1111111111111111111111",responseData.data)
			 if(pageData.value.pageInde==1){
				 data.value=responseData.data;
			 }else{
				 if(responseData.data.length==0){
					 pageData.value.more=false;
				 }else{
					 for(var i=0;i<responseData.data.length;i++){
					 	data.value.push(responseData.data[i])
					 } 
				 }
			 }
			  
		}).catch((err) => {
			uni.showToast({
				icon: 'error',
				title: '请求失败'
			});
			uni.hideLoading();
		}) 
	}
	const address=ref({
		longitude:getApp().globalData.location.longitude,
		latitude:getApp().globalData.location.latitude
	});
	console.log("1111111111111111111111111111",address.value)
	 
	function setJuLi(){
		uni.getLocation({
			type: 'wgs84',
			success: function (res) {
				initData();
				console.log(res)
				console.log('当前位置的经度：' + res.longitude);
				console.log('当前位置的纬度：' + res.latitude);
				address.value.longitude=res.longitude;
				address.value.latitude=res.latitude;  
			}
		}); 
	}
	 setJuLi()
	/**折扣计算
	 * @param {Object} originalPrice 原价
	 * @param {Object} discountPrice 现价
	 */
	function calculateDiscount(originalPrice, discountPrice) {
	  if (discountPrice === 0 || originalPrice === 0) {
	    return 0; // 无折扣或原价为0时，返回0
	  }
	  const zheKou=(discountPrice / originalPrice) * 10; 
	  const length=zheKou.toString().length;
	  if(length>4){
		return zheKou.toFixed(2)+"折";
	  }
	  return zheKou+"折"; // 计算折扣力度并返回
	}
	function distance(la1, lo1, la2, lo2) {
		console.log(la1+"----"+lo1+"----"+la2+"----"+lo2)
	    var La1 = la1 * Math.PI / 180.0;  
	    var La2 = la2 * Math.PI / 180.0;  
	    var La3 = La1 - La2;  
	    var Lb3 = lo1 * Math.PI / 180.0 - lo2 * Math.PI / 180.0;  
	    var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2) + Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)));  
	    s = s * 6378.137;//地球半径  
	    s = Math.round(s * 10000) / 10000; 
		if(s<1){
			s=s*1000;
			s= s.toFixed(2);
			s=s+"m";
		}else{
			s= s.toFixed(2);
			s=s+"km"
		} 
		return s;
	}
</script>

<style> 
 
	 Page{
	 	  background-color: #F2F2F2;
	 	  font-size: 30rpx;
	 	 }
	.tp_2{
		width: 100%;height:1rpx;margin-top: 200rpx;float: left;
	}
	.tp_1{
		position: fixed;top: 150rpx;left:0rpx;height: 60rpx;background-color: white;width: 100%;z-index: 999;
	}
	.tp_3{
		position: fixed;top: 210rpx;left:0rpx;height: auto;background-color: white;width: 100%;z-index: 999;
	}
	.items{
		width:44%;height:auto;float: left;background: white;margin-left: 4%;margin-top: 25rpx;
	}
	.items_img{
		width: 280rpx;height: 220rpx;border-radius: 20rpx;overflow: hidden;margin: auto auto;margin-top: 20rpx;
	}
	.img{
		width: 280rpx;height: 220rpx;
	}
	.title{
		width: 94%;margin-left: 3%;font-size: 28rpx;float: left;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
	}
	.item_01{
		width: 94%;margin-left: 3%;font-size: 24rpx;color: #cccccc;float: left;
	}
	.p1{
		color: red;font-size: 24rpx;float: left;line-height: 50rpx;
	}
	.p2{
		text-decoration: line-through;font-size: 18rpx;float: left;line-height: 55rpx;
	}
	.p1_1{
		width: 90rpx;background: #FFE6E5;float: right;height: 40rpx;border-radius: 10rpx;line-height: 40rpx;text-align: center;color: red;font-size: 22rpx;margin-top: 8rpx;
	}
	.more{
		width: 100%;text-align: center;line-height: 50rpx;color: #666666;font-size: 25rpx;float: left;margin-top: 10rpx;
	}
	 
	.items_9{
		width: 120rpx;height: 40rpx;float: left;color: white;font-size: 18rpx;line-height: 40rpx;float: left;
	}
	.items_8{
		width: 70rpx;height: 40rpx;float: left;background: #3CCFC6;color:white;font-size: 25rpx;text-align: center;line-height: 40rpx;float: left;
	}
	.items_7{
		width: 280rpx;height:40rpx;float: left;margin-top: -41rpx;background: rgba(0, 0, 0, 0.5);float: left;
	}
	.shop_item10{
		width: 28rpx;height: 28rpx;float: left;
	}
	.items_16{
		width: 250rpx;height: 40rpx;line-height: 40rpx;font-size: 20rpx;border:1rpx solid #25CAC0;text-align: center;color: #25CAC0;border-radius: 10rpx;float: left;
	}

</style>